<link rel="stylesheet" href="<?php echo $this->webroot;?>css/medium.css" />
<script src="<?php echo $this->webroot;?>js/medium.js"></script> 

 <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.4/bootstrap-editable/css/bootstrap-editable.css">
 <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.4/bootstrap-editable/js/bootstrap-editable.min.js"></script>
 <script src="https://raw.github.com/eternicode/bootstrap-datepicker/master/js/locales/bootstrap-datepicker.it.js"></script>

<ol class="breadcrumb">
  <li><a href="<?php echo $this->webroot;?>">Home</a><span class="divider">/</span></li>
  <li><a href="<?php echo $this->webroot;?>Plan/index">Piano di Lavoro</a><span class="divider">/</span></li>
  <li class="active">Modifica Argomento</li>
</ol>
<form method="post" action="<?php echo $this->webroot; ?>Plan/save">
    <input type="hidden" name="PlanDetail[id]" value="<?php echo $planDetail["PlanDetail"]["id"];?>" />
    <input type="hidden" id="argomento_form" name="PlanDetail[argomento]" value="<?php echo $planDetail["PlanDetail"]["argomento"];?>" />
    <input type="hidden" id="titolo_form" name="PlanDetail[titolo]" value="<?php echo $planDetail["PlanDetail"]["titolo"];?>" />
    <input type="hidden" id="motivazione_posticipo_form" name="PlanDetail[motivazione_posticipo]" value="<?php echo $planDetail["PlanDetail"]["motivazione_posticipo"];?>" />
    <input type="hidden" id="data_svolgimento" name="PlanDetail[data_svolgimento]" value="<?php echo $planDetail["PlanDetail"]["data_svolgimento"];?>" />
 <div class="row">
    <div class="span10 offset1">
        <div id="editor">
           <div id="titolo" class="title demo Medium Medium-inline" contenteditable="true" style="font-size: 20px;"><p><?php echo $planDetail["PlanDetail"]["titolo"]?></p></div>
            <div id="argomento" class="textarea demo Medium Medium-rich" contenteditable="true"><p><?php echo $planDetail["PlanDetail"]["argomento"]?> </p></div>
        </div>        
    </div>   
    <div class="row">
        <div class="span10 offset1">
            <p>Data Previsione svolgimento : <?php echo  CakeTime::format($planDetail["PlanDetail"]["data_previsione"],  '%d/%m/%Y'); ?>  </p>
            <p>Data Svolgimento effettivo : <a href="#" id="data_svolgimento_date" data-type="date" data-title="Seleziona la data di svolgimento"> <?php echo $planDetail["PlanDetail"]["data_svolgimento"]!=null?CakeTime::format($planDetail["PlanDetail"]["data_svolgimento"],  '%d/%m/%Y'):""; ?></a></p>
            
        </div>

    </div> 
           
    <div class="row">
        <div class="span10 offset1">
            <div id="motivazione_posticipo" class="textarea demo Medium Medium-rich" contenteditable="true"><p><?php echo $planDetail["PlanDetail"]["motivazione_posticipo"]?> </p></div>
        </div>
    </div> 
           
    <div class="row">
        <div class="span3 pull-right">
            <button type="submit" class="btn btn-inverse btn-block pull-right"><?php echo $planDetail["PlanDetail"]["id"]?"Salva":"Modifica" ?></button> &nbsp;   
        </div>
        <div class="span3 pull-right">
            <button type="submit" class="btn btn-block pull-right">Annulla</button>    
        </div>
    </div> 

     
 </div>
 </form>

<script>
    new Medium({
        element: document.getElementById('titolo'),
        mode: 'inline',
        maxLength: 125,
        placeholder: 'Inserisci il titolo dell\'argomento'
    });
    new Medium({
        element: document.getElementById('argomento'),
        mode: 'rich',
        placeholder: 'Inserisci l\'argomento'
    });
    new Medium({
        element: document.getElementById('motivazione_posticipo'),
        mode: 'rich',
        placeholder: 'Inserisci la motivazione per il ritardo'
    });

    $('#data_svolgimento_date').editable({
        format: 'yyyy-mm-dd',    
        viewformat: 'dd/mm/yyyy',
        emptytext:'Nessuna data selezionata',
        clear:false,  
            validate: function(value) {
                var curr_date = value.getDate();
                var curr_month = (value.getMonth()+1)<10?'0'+(value.getMonth()+1):(value.getMonth()+1);
                var curr_year = value.getFullYear();
                dateformatted = (curr_year + "-" + curr_month + "-" + curr_date);
                $("#data_svolgimento").val(dateformatted);
        },    
        datepicker: {
                weekStart: 1
           }
        }
    );
    
    
 
    
    
    $( document ).ready(function() {
        
        $(".Medium").on("blur",function(event){
            var targetform = $("#"+event.target.id+"_form");
            targetform.val($(event.target).text()); 
            console.log(targetform.val());           
            
            
            
        });




    });
       
           
    
</script>